<template>
  <div>
    <h3>自定义 hook 函数: 需要一：获取鼠标当前坐标</h3>
    <h3>x: {{ x }}</h3>
    <h3>y: {{ y }}</h3>
    <hr />
    <h3>
      <div v-if="loading">正在加载中 ...</div>
      <!-- <div v-else>
        <li>{{ data.name }}</li>
        <li>{{ data.phone }}</li>
        <li>{{ data.address }}</li>
      </div>  -->
    <div v-else>
        <ul v-for="item in data" :key="item.id">
          <li>{{ item.id }}</li>
          <li>{{ item.title }}</li>
          <li>{{ item.price }}</li>
        </ul>
      </div> 
    </h3>
  </div>
</template>
<script lang="ts">
import { defineComponent, watch } from "vue";
import customHook from "../hook/customHook";
import userRequest from "../hook/userRequest";
// 定义接口
interface Person {
  name: number;
  phone: number;
  address: string;
}

interface Product {
  id: number;
  title: number;
  price: string;
}

export default defineComponent({
  name: "hook", // 自定义 hook 函数
  setup() {
    // const x = ref(-1);
    // const y = ref(-1);

    // const handler = (event: MouseEvent) => {
    //   x.value = event.pageX;
    //   y.value = event.pageY;
    // };

    // onMounted(() => {
    //   console.log("======");
    //   window.addEventListener("click", handler);
    // });

    const { x, y } = customHook();

    // 地址数据
    // const { loading, data, errMsg } = userRequest<Person>("/data/address.json");
    const { loading, data, errMsg } = userRequest<Product[]>(
      "/data/product.json"
    );
    // console.log("data length = ", data.value.length);
    
    // 监视 data
    watch(data, ()=> {
      if(data.value) {
        console.log("data length = ", data.value.length);
      }
    })


    return {
      x,
      y,
      loading,
      data,
      errMsg,
    };
  },
});


</script>
